<template>
	<div>
		<el-form class="query-form" :model="query_params">
			<el-row>
		    <el-col class="query-item" :span="6">
					<el-form-item label="用户名称" prop="nickname">
						<el-input v-model="query_params.nickname"  autocomplete="off" placeholder="请输入用户名称" />
					</el-form-item>
				</el-col>
				<el-col class="query-item" :span="6">
					<el-form-item >
						<el-button type="primary" @click="search">搜索</el-button>
					</el-form-item>
				</el-col>

		  </el-row>
		</el-form>
		<!-- <el-row class="add-box-css"><el-button type="primary" @click="operation">新增</el-button></el-row> -->
		<el-table :data="tableData" border style="width: 100%">
		    <el-table-column label="序号" >
				<template #default="scope">
		            {{scope.$index+1}}
		        </template>
		    </el-table-column>
			<!-- <el-table-column prop="avatar" label="头像" >
				<template #default="scope">
					<el-image class="list-avatar" style="width: 100px; height: 100px" :src="scope.row.avatar"  />
				</template>
			</el-table-column> -->
		    <el-table-column prop="username" label="昵称"  />
				<!-- <el-table-column prop="name" label="姓名" width="180" /> -->
		    <!-- <el-table-column prop="phone" label="电话" /> -->
			<!-- <el-table-column prop="createdAt" label="入驻时间" /> -->
			<el-table-column prop="status" label="状态" >
				<template #default="scope">
						<div class="red-color" v-if="scope.row.status=='DISABLE'">{{getStatus(scope.row)}}</div>
						<div v-if="scope.row.status!='DISABLE'">{{getStatus(scope.row)}}</div>
				</template>
			</el-table-column>
			<el-table-column  label="操作" >
		    	<template #default="scope">
		    		<!-- <el-button type="primary" size="small" @click="operation(scope.row)">审核</el-button> -->
		    		<el-switch @change="changeState(scope.row)" v-model="scope.row.status" active-value="NORMAL" inactive-value="DISABLE" />
		      	</template>
			</el-table-column>
		</el-table>
		<div class="pagination_box">
			<el-pagination background layout="prev, pager, next"  :total="total" @current-change="handleCurrentChange" />
		</div>
	</div>
</template>
<script type="text/javascript">
	import {  ElMessageBox ,ElMessage} from 'element-plus'

	export default {
		data(){
			return {
				queryForm:{},
				query_params:{
					current:1,
					size:10
				},
				tableData:[],
				total:0,
				drawer:false,
				// 表单
				ruleFormRef:{},
				ruleForm :{
				},
				rules:{
				  name: [
				    { required: true, message: '请输入商户', trigger: 'blur' },
				  ],
				},
			}
		},
		methods:{
			changeState(row){
				ElMessageBox.alert('确定要改变状态吗？', '提示', {
				    confirmButtonText: 'OK',
				    callback:async action => {
				      if(action == "confirm"){ // 确定
				      	const params = {
					      	userId:row.id,
					      	status:row.status
					      }
					      const res =await this.$API.updateAadminState(params);
					      if(res.code == 200) {
					      	ElMessage({
						        type: 'success',
						        message: `修改成功`,
						    })
					      }
					      else{

					    }
				      }
				      else{ // 取消
				      	if(row.status == "DISABLE"){
				      		row.status="NORMAL"
				      	}
				      	else if(row.status == "NORMAL"){
							row.status="DISABLE"
				      	}
				      }
				      
				    },
				})
			},
			search(){
				this.query_params.current=1;
				this.query_params.size=10;
				this.getList()
			},
			operation(row){
				this.drawer=true
				
			},
			getStatus(row){//查询状态
				var str="正常"
				if(row.status=='DISABLE'){
					str="待审核"
				}
				return str
			},
			confirm(row){//确认身份
				this.$API.confirmRole({
					id:row.id
				}).then(res=>{
					if(res.code==200){
						ElMessage({
						    message: '操作成功',
						    type: 'success',
						 })
					}
					else{
						ElMessage({
						    message: '操作失败',
						    type: 'warning',
						})
					}
				}).catch(error=>{
					ElMessage({
						    message: '操作失败',
						    type: 'error',
						 })
				})
			},
			handleCurrentChange(val){
				this.query_params.current=val;
				this.getList();
			},
			getList(){
				this.$API.getAadminList(this.query_params).then(res=>{
					if(res.code==200){
						this.tableData=res.data.records;
						if(this.total>1){
							this.total=parseInt(res.total)
						}
					}
				})
			},
		},
		mounted(){
			this.getList();
		}
	}
</script>
<style type="text/css">
	.pagination_box{
		    text-align: center;
		    display: flex;
		    justify-content: center;
		    width: 100%;
	}
	.query-item{
		margin-right:10px
	}
	.query-form{
		    padding:20px;
				    padding-bottom: 0px;
	}
	.add-box-css{
		width:100%;
		align-items: end;
    justify-content: end;
    padding: 0px 1rem 1rem 0px;
	}
	.list-avatar{
		width:66px !important;
		height:66px !important
	}
	.red-color{
		color: red;
	}
</style>
